/*
 * font-smoothing对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服,
 * font-smoothing是非标准的CSS定义
 */
html,
body {
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: auto!important;
  /* 若用户是一个正常屏幕，最低高度是屏幕高度，根据内容弹性改变高度 */
}

@media screen and (max-height: 1500px) {
  html,
  body {
    min-height: 100vh;
  }
}

// 若用户是一个巨无霸屏幕，body最高设置1500px
@media screen and (min-height: 1500px) {
  html,
  body {
    height: 1500px;
  }
}

html {
  font-size: 4vw;
}
/*
 * 根据屏幕宽度设置html标签的字体大小，
 * 内容大小单位使用rem实现样式响应式；
 */
@media screen and (min-width: 450px) {
  html {
    font-size: 14px;
  }
}
@media screen and (max-width: 450px) {
  html {
    // font-size: 4vw;
  }
}

body,
p,
h1,h2,h3,h4,h5,h6,
ul,ol,li,
span {
  margin: 0;
  padding: 0;
}


ul,ol {
  list-style-type: none;
}

th {
  text-transform : capitalize;
}

.container-fluid {
  width: 100%;
  max-width: 1900px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 992px) {
  .container-fluid {
    padding-left: 60px;
    padding-right: 60px;
  }
}


a:focus,
a:active,
a:hover {
  outline: 0;
  text-decoration: none;
}

// 页面垂直布局

.wrapper {
  min-height: 100vh;
}
.wrapper {
  display: grid;
  // 设置header / footer高度根据内容自身决定, views占用剩余空间高度
  // 以此呈现网页至少占用100vh高度
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

// 表单中的GRID
.dsp-form-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
@media screen and (max-width: 370px) {
  .dsp-form-group {
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }
}
// 普通GRID
.grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 15px;
}
@media screen and (max-width: 320px) {
  .grid {
    grid-gap: 5px;
  }
}
.grid-col-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 992px) {
  .grid-col-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .grid-col-3 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.grid-item-title {
  margin-bottom: 10px;
  border-bottom: 1px solid rgb(194, 202, 216);
  h3 {
    padding: 0.5rem 0;
  }
}

[class*="flex-"] {
  display: flex;
}
.flex-around {
  justify-content: space-around;
}
.flex-between {
  justify-content: space-between;
}
.flex-align-items {
  align-items: center;
}
.flex-direction-row {
  flex-direction: row;
}



// 全局使用各转换首字母大写
.uppercase {
  text-transform : capitalize;
}
.font-all-uppercase{
  text-transform : uppercase;
}

@media screen and (max-width: 768px) {
  .has-radios .title {
    margin-bottom: 20px;
  }
}
.tools {
  line-height: 30px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  overflow: hidden
}

.main-head {
  padding-top: 15px;
  padding-bottom: 15px;

  h1 {
    line-height: 1;
    font-size: 24px;
    small {
      font-weight: 100;
    }
  }
}

.main-head .ant-radio-group-solid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 450px) {
  .main-head .ant-radio-group-solid {
    display: grid;
  }
}

// views页面所使用的基本样式
@media screen and (max-width: 768px) {
  .main-head {
    display: block;
  }
}

.content {
  padding-top: 20px;
  padding-bottom: 20px;
}

.portlet {
  padding: 15px 20px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 3px 15px 35px 0 rgba(0,0,0,0.24)
}


header {
  padding-bottom: 10px;
}
.views {
  padding-top: 20px;
}


// .ant-menu

//页面标题及没有数据的提示字体大小
html {
  font-size: 62.5% !important; /* 10÷16=62.5% */
}

@media only screen and (max-width: 320px ) {
  .title > h1 {
    font-size: 1rem !important; /* 15.04÷16=94% */
  }

  .empty {
    text-align: center;
    font-size: 1rem !important; /* 15.04÷16=94% */
  }
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
  .title > h1 {
    font-size: 1.5rem !important; /* 17.44÷16=109% */
  }

  .empty {
    text-align: center;
    font-size: 1.45rem !important; /* 17.44÷16=109% */
  }
}

@media only screen and (min-width: 500px){
  .title > h1 {
    font-size: 2rem !important; /* 20÷16=125% */
  }

  .empty {
    text-align: center;
    font-size: 1.5rem !important; /* 20÷16=125% */
  }
}



@media screen and (max-width: 320px) {
  .portlet {
    padding: 12px 15px 15px;
  }
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.setting-group {
  margin-bottom: 10px;
  grid-template-columns: 1fr 600px;
  grid-template-columns: repeat(4, auto);
  .setting-group-wrapper {
    grid-column: 4;
    grid-row: 1;
    border-bottom: 1px solid;
    padding: 10px;
    .checkbox-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    > button {
      margin-top: 10px;
    }
  }
}

@media screen and(max-width: 700px) {
  .setting-group {
    // display: grid;
    grid-template-columns: 1fr;
    .setting-group-wrapper {
      grid-column: 1;
      grid-row: 1;
      .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}

.nav {
  display: flex;
  > a::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-left: auto;
    margin-right: auto;
    // background-color: #1da57a;
    transition: all 0.3s;
  }
  > a:not(.active) {
    // color: rgba(0, 0, 0, .45);
  }
  > a.active::after {
    width: 100%;
  }
}

.public-text-center {
  text-align: center;
}
